<script setup lang="ts">
import { ref, useSlots } from "vue";

defineProps<{
    column: any[];
}>();
const dialogVisible = ref(false);

// interface类型是对象的模版
interface FormType {
    // 键是字符串，值是字符串或数字
    [key: string]: string | number;
}

const form = ref<FormType>({});
const tp = ref("");
const openDialog = (row: any, type: string) => {
    dialogVisible.value = true;
    tp.value = type;
    if (type === "add") {
        form.value = {};
    } else {
        // 深拷贝
        form.value = JSON.parse(JSON.stringify(row));
    }
};
const handleSubmit = () => {
    console.log(form.value);
};
defineExpose({
    openDialog,
});
console.log(useSlots(), "useSlots");
</script>

<template>
    <div class="CommonDialog">
        <el-dialog
            v-model="dialogVisible"
            :title="tp === 'add' ? '新增' : '编辑'"
            width="30%"
        >
            <el-form :model="form">
                <template v-for="(item, index) in column" :key="index">
                    <el-form-item
                        v-if="
                            tp === 'add'
                                ? (item?.addDisplay ?? true)
                                : (item?.editDisplay ?? true)
                        "
                        :label="item?.label"
                        :label-width="item?.formLabelWidth"
                    >
                        <slot
                            v-if="$slots.hasOwnProperty(`${item?.prop}Form`)"
                            :name="`${item?.prop}Form`"
                            :form="form"
                        ></slot>
                        <el-input
                            v-else-if="item.type === 'input'"
                            v-model="form[item.prop]"
                        />
                        <el-select
                            v-else-if="item.type === 'select'"
                            v-model="form[item.prop]"
                        >
                            <el-option
                                v-for="option in item.options"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="less" scoped>
:deep(.el-dialog__header) {
    text-align: left;
}
</style>
